<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="../../resources/css/app.css" type="text/css" />
    <title>AIOS Visualization</title>
  	<script type="text/javascript" src="../../resources/js/sencha-touch-all-debug.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataStores.js" charset="utf-8"></script>
	<script type="text/javascript" src="../../resources/js/dataTables.js" charset="utf-8"></script>
	<script type="text/javascript"> var d_i=0; var c_i=0; var m_i=0; var y_i=0; var i=0; var targetDay=new Date(),compareDay = "", tID = 0;</script>
	<script>
			
	
			Ext.application({
			name: 'AIOS',
			requires: [
			          	'Ext.data.Store',
			          	'Ext.dataview.List',
			      		'Ext.Toolbar',
			           	'Ext.chart.Chart', 
					   	'Ext.chart.interactions.PanZoom',
						'Ext.chart.series.*', 
						'Ext.chart.axis.*', 
						'Ext.chart.*',
						'Ext.TitleBar',
						'Ext.draw.Component',
						'Ext.chart.CartesianChart',
						'Ext.Viewport.*'
			           
			       ],
			launch: function() {
				
					Ext.create("Ext.tab.Panel", {
					fullscreen: true,
					activeItem: 2,
					tabBarPosition: 'bottom',

					items: [
					        
//************************************** Disabled **************************************************************************				        

						{
					    title: ' d',
					    id: 'displayNone',
					    styleHtmlContent: true,
					    scrollable: true,
					    
					    listeners: {
					    	activate: function() {
					    		this.setHidden(true);
							}
						},
					 }, 
					        
//************************************** Present View **************************************************************************				        
				            {
				                title: '現在値',
				              	iconCls: 'now',
				                styleHtmlContent: true,
				                scrollable: true,
				                listeners: {
				                	activate: function() {
										document.location.href = "currentView.html"
										
									}
				                }
							},

//***************************************** Day View *********************************************************				                
				                
				            {
				                title: '日',
				                pressed : true,
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
								
								listeners: {
									
									activate: function() {

										Ext.getCmp('targetDatePicker').setValue(targetDay);
										Ext.getCmp('ComapreDatePicker').setValue(compareDay);
										
										/* Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id=3&report_type=0&date_start='+targetDay.getFullYear()+'-'+(targetDay.getMonth()+1)+'-'+targetDay.getDate()+'&date_end='+targetDay.getFullYear()+'-'+(targetDay.getMonth()+1)+'-'+targetDay.getDate()+'',
											type: 'GET',
											crossDomain: true,
											dataType: "json",
											callbackkey: 'callback',
											scope: this,
											scope: this,      /// fix handler scope
	
											callback: function (response, value, request) {
												storeTargetHoursData(value);
										    },
										    

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										}); */
										
										Ext.data.JsonP.request({
											url: 'http://153.121.40.23:8080/aios-api/aios/api/GetTapGroup.php',
											method: 'POST',
											callbackkey: 'callback',
											params: {
												tap_id: 1
											},

											scope: this,      /// fix handler scope

											callback: function (response, value, request) {
												StoreTapList(value);
												
											},

											failure: function (response, request) {
												Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
											}
										});
									}
								},
				                
				                items: [
				
				   ///////////////////// Header ////////////////////
					 		               {
					 		       			
					 		       			xtype : 'titlebar',
					 		       			docked : 'top',
					 		       			title : '日',
					 		       			items : [
					 		       			{
					 		       				xtype : 'button',
					 		       				align : 'right',
					 		       				ui : 'round',
					 		       				iconCls: 'home',
					 		       				text : 'ホーム',
					 		       				 handler: function(){
					 		       			            document.location.href = "../../index.html";         
					 		       			        }
					 		       				
					 		       			},   
					 		       			{
					 		       				xtype: 'selectfield',
					 		       				id : 'tapGroup',
					 		       				name: 'options',
					 		       				store : storeTap,
					 		       				displayField: 'tapGroupName',
					 		       		 		valueField: 'tapGroupID',
					 		       		 	listeners: {
						 	 	       		 	change: function (select, newValue, oldValue) {
						 		       		 				tID = Ext.getCmp('tapGroup').getValue();
						 		       		 				
						 		       		 			Ext.data.JsonP.request({
					 		    	        				url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=0&date_start='+targetDay.getFullYear()+'-'+(targetDay.getMonth()+1)+'-'+targetDay.getDate()+'&date_end='+targetDay.getFullYear()+'-'+(targetDay.getMonth()+1)+'-'+targetDay.getDate()+'',
															type: 'GET',
															crossDomain: true,
															dataType: "json",
															callbackkey: 'callback',
															scope: this,
					
															callback: function (response, value, request) {
																storeTargetHoursData(value);
														    },
														    

															failure: function (response, request) {
																Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
															}
														}); 
						 		       		 			
						 		       		 			if(Ext.getCmp('ComapreDatePicker').getValue() != null){
							 		       		 			Ext.data.JsonP.request({
				 		    	                    			url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=0&date_start='+compareDay.getFullYear()+'-'+(compareDay.getMonth()+1)+'-'+compareDay.getDate()+'&date_end='+compareDay.getFullYear()+'-'+(compareDay.getMonth()+1)+'-'+compareDay.getDate()+'',
																type: 'GET',
																crossDomain: true,
																dataType: "json",
																callbackkey: 'callback',
																scope: this,      /// fix handler scope
						
																callback: function (response, value, request) {
																	storeCompareHoursData(value);
															    },
															    
	
																failure: function (response, request) {
																	Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																}
															});
						 		       		 			}
						 		       		 				
									 		       		} 
					 		       				}
					 		       			}
					 		       			]
					 		            },
					 		            
			
			////////////////// Target and Compare date selector////////////////		 		    		
					 		    		
					 	                {
					 		    			
					 		    			xtype: 'fieldset',
					 		    			bodyStyle: "background-color: #C0C0C0;",
					 		    		 	layout: {
					 		    	            type: 'hbox',
					 		    	            pack: 'start', 
					 		    	            align: 'left'
					 		    	        },
					 		    	        
					 		    			items: [
					 		    			        {
														xtype: 'fieldset',
														bodyStyle: "background-color: #C0C0C0;",
													 	layout: {
												        type: 'vbox',
												        pack: 'start', 
												        align: 'left'
											     },
											     
													items: [
									 		    			{
									 		    	               xtype: 'datepickerfield',
									 		    	               id : 'targetDatePicker',
									 		    	               destroyPickerOnHide: true,
									 		    	                label: '対象日',
									 		    	                name: 'targetDate',
									 		    	                dateFormat :"Y/m/d",
									 		    	                //value: new Date(),
									 		    	              	picker: {
									 		    	              		yearFrom : new Date().getFullYear()-1,
									 		    	              		slotOrder:["year", "month","day"],
									 		    	              		
									 		    	              		 listeners: {
									 		    	                       show: function(component, eOpts) {
									 		    	                           var date = this.getValue();
									 		    	                           if (!date || isDateInPast(date)) {
									 		    	                               this.setValue(new Date());
									 		    	                           }
									 		    	                       },
									 		    	                       
									 		    	                      change: function(picker, value) {
									 		    	                    	 targetDay = value;
									 		    	       
									 		    	                    	  
									 		   /////////////json data for Day target ///////////
																			 	
											 		    	        			Ext.data.JsonP.request({
											 		    	        				url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=0&date_start='+targetDay.getFullYear()+'-'+(targetDay.getMonth()+1)+'-'+targetDay.getDate()+'&date_end='+targetDay.getFullYear()+'-'+(targetDay.getMonth()+1)+'-'+targetDay.getDate()+'',
																					type: 'GET',
																					crossDomain: true,
																					dataType: "json",
																					callbackkey: 'callback',
																					scope: this,
																					/* params: {
																						tap_id: 1
																					}, */
																					scope: this,      /// fix handler scope
											
																					callback: function (response, value, request) {
																						storeTargetHoursData(value);
																				    },
																				    

																					failure: function (response, request) {
																						Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																					}
																				}); 
											 		    	                 } 
									 		    	                       
									 		    	                   }, 
									 		    	              	}
									 		    			},
									 		    			        
									 		    			{
									 		    				xtype: 'fieldset',
									 		    				bodyStyle: "background-color: #C0C0C0;",
									 		    			 	layout: {
									 		    	                type: 'vbox',
									 		    	                pack: 'start', 
									 		    	               align: 'middle'
									 		                },
									 		    			items: [
									 		    			{
									 		    					xtype: 'textfield',
									 		    					id: 'dayTargetTotal',
									 		    					label: '累積電力量',
									 		    					readOnly: true,
									 		    					value: '3124'
									 		    				}, {
									 		    					xtype: 'textfield',
									 		    					id: 'dayTargetMax',
									 		    					label: '最大電力',
									 		    					readOnly: true,
									 		    					value: '192'
									 		    			}]
									 		    			
									 		    		}]}, {
									 						
									 						xtype : 'spacer'
									 					},
					 		    		
					 		    		{
					 		    			

											xtype: 'fieldset',
											bodyStyle: "background-color: #C0C0C0;",
										 	layout: {
									        type: 'vbox',
									        pack: 'start', 
									        align: 'left'
								     },
								     
										items: [
						 		    			{
						 		    				xtype: 'datepickerfield',
						 		    	               destroyPickerOnHide: true,
						 		    	               id: 'ComapreDatePicker',
						 		    	                label: '比較日',
						 		    	                name: 'targetDate',
						 		    	                dateFormat :"Y/m/d",
						 		    	                value: new Date(),
						 		    	              	picker: {
						 		    	              		yearFrom : new Date().getFullYear()-1,
						 		    	              		slotOrder:["year", "month","day"],
						 		    	              		
						 		    	              		 listeners: {
						 		    	                       show: function(component, eOpts) {
						 		    	                           var date = this.getValue();
						 		    	                           if (!date || isDateInPast(date)) {
						 		    	                               this.setValue(new Date());
						 		    	                           }
						 		    	                       },
						 		    	                      
						 		    	                      change: function(picker, value) {
						 		    	                    	 compareDay = value;
								 		    	                   
						 		    	                    	 Ext.data.JsonP.request({
						 		    	                    			url: 'http://153.121.40.23:8080/aios-api/aios/api/GetAmountPower?tap_group_id='+tID+'&report_type=0&date_start='+compareDay.getFullYear()+'-'+(compareDay.getMonth()+1)+'-'+compareDay.getDate()+'&date_end='+compareDay.getFullYear()+'-'+(compareDay.getMonth()+1)+'-'+compareDay.getDate()+'',
																		type: 'GET',
																		crossDomain: true,
																		dataType: "json",
																		callbackkey: 'callback',
																		scope: this,      /// fix handler scope
								
																		callback: function (response, value, request) {
																			storeCompareHoursData(value);
																	    },
																	    

																		failure: function (response, request) {
																			Ext.Msg.alert("申し訳ありませんが、再試行してください... </br>"+response);
																		}
																	}); 
						 		    	                    	  
								 		    	                 } 
						 		    	                       
						 		    	                   }, 
						 		    	              	}
						 		    		},
						 		    			        
							 		    	{
							 		    				xtype: 'fieldset',
							 		    				bodyStyle: "background-color: #C0C0C0;",
							 		    			 	layout: {
							 		    	                type: 'vbox',
							 		    	                pack: 'start', 
							 		    	               align: 'middle'
							 		                },
							 		    			items: [
							 		    			{
							 		    					xtype: 'textfield',
							 		    					id: 'dayCompareTotal',
							 		    					label: '累積電力量',
							 		    					readOnly: true,
							 		    					value: ''
							 		    				}, {
							 		    					xtype: 'textfield',
							 		    					id: 'dayCompareMax',
							 		    					label: '最大電力',
							 		    					readOnly: true,
							 		    					value: ''
							 		    			}]
							 		    			
							 		    		}]
					 		    			
					 		    			}
					 		    		
					 		    		]
										},	
										
						////////// graph/////////	
						
					 	               {
					 	                   xtype: 'carousel',
					 	                   height: 430,
						 	         		width: '100%',
	
					 	                   defaults: {
					 	           				styleHtmlContent: true	
					 	           			},

							 	           items: [
							 	                   {
							 	                	   xtype: 'container',
							 	                	   layout: 'fit',
							 	                	   items: [
																{
																	xtype: 'chart',
																	id : 'gORt',
																	
																	background: 'white',
																	width: '100%',
																	height: 410,
																									
																    animate: true,
																    store: storeHours,
																    legend: {
																    	position : 'top'
																    },
																    axes: [{
																            type: 'numeric',
																            position: 'left',
																            fields: ['data1','data2'],
																            title: {
																                text: '電力量(Wh)',
																                fontSize: 15
																            },
																            grid: {
																                odd: {
																                    opacity: 0.25,
																                    fill: '#ddd',
																                    stroke: '#bbb',
																                    'stroke-width': 0.5
																                }
																            },
																            minimum: 0
																       		 }, 
																
																       			 {
																                type: 'category',
																                position: 'bottom',
																                fields: ['name'],
																                title: {
																                    text: '時',
																                    fontSize: 15
																                }
																         }],
																            
																    series: [{
																                type: 'bar',
																                highlight: {
																                    size: 7,
																                    radius: 7
																                },
																                style: {
																                     fillStyle: '#F0A50A'
																                },
																				fill: true,
																                xField: 'name',
																                yField: 'data1',
																              	title : ['対象日'],
																               
																            }, {
																                type: 'line',
																                highlight: {
																                    size: 7,
																                    radius: 7
																                },
																                style: {
																                    stroke: '#C20024'
																                },
																				markerConfig: {
																                    type: 'circle',
																					size: 1,
																					radius: 1,
																					stroke: '#C20024',
																					'stroke-width': 1
																                },
																				fill: false,
																				smooth: true,
																                xField: 'name',
																                yField: 'data2',
																                title : '比較日',
																               
																            }]
																},
							 	                	   ]
							 	                	},
							 	                   
							 	                  
													   {
															xtype: 'fieldset',
															id : 'HourTableView',
														 	layout: {
												                type: 'hbox',
												               pack: 'start', 
												               align: 'middle'
												            },
															items: [
															        {
															        	xtype: 'panel',
																		width: '50%',
																		height : '100%',
																		styleHtmlContent: true,
																		html: [ generateHtmlHoursTable(storeHours,0,12)],
															        },
															        {
															        	xtype: 'panel',
																		width: '50%',
																		height : '100%',
																		styleHtmlContent: true,
																		html: [ generateHtmlHoursTable(storeHours,12,24)],
															        }
															       
																]
								 	                }, 
					 	     				]
					 	      		 },

					 	                
					 		    ]
				            },
				            
// ******************************************** Month View *************************************************************				            
				            
				            {
				                title: '月',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "monthView.html"
									}
				                }
							},
				                			
// *************************************************** Year View *******************************************************			 	                

				           	{
				                title: '年',
				                iconCls: 'cld',
				                styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "yearView.html"
										
									}
				                }
								},
				                
//************************************** Statistic View *********************************************************************************************

				            {
				                title: '統計',
				              	iconCls: 'chart',
				              	styleHtmlContent: true,
								scrollable: true,
				                listeners: {
									activate: function() {
										document.location.href = "statisticView.html"
									}
				                }
								}
								

					]
				});
			}
		});
	</script>
 </head>
 <body>
 </body>
</html>
